<!--还车页面-->
<template>
	<view class="page_all">
		<view class="page_titleArea">
			<view class="page_title_line">
				<view class="page_title_line_left" @click="leftClick()"><image src="../../static/all/back_white.png" style="width:50rpx;height:50rpx;"></image></view>
				<view class="page_title_line_middle">开始用车</view>
				<view class="page_title_line_left"></view>
			</view>
		</view>
		<view class="page_contentArea" style="background-color:#F7F7F7;">
			<view class="space_15"></view>
			<!--里程数据输入块-->
			<view class="input_box">
				<view class="space_15"></view>
				<view class="r_return_info">
					<image src="../../static/all/r_msg.png" style="width:45rpx;height:45rpx;margin-top:5rpx;"></image>
					<span style="padding: 10rpx;"></span>
					使用车辆前，请拍照上传里程表清晰照片，以识别数据。
				</view>
				<view class="space_15"></view>
				<view class="r_return_img"> <!--上传图片部分-->
					<view v-if="img_km_num>0&&item.type=='km'" class="img_box_small" style="position:relative;"
					      v-for="(item,index) in form_task_progress.accessEventAppendixList" :key="index">
						<image :src="item.url" class="img_small"></image>
						<image src="../../static/all/imgdel.png" style="position:absolute;top:5rpx;right:5rpx;width:50rpx;height:50rpx;" @click="delImg(item.remark,item.type)"></image>
					</view>
					<view v-if="img_km_num==0" class="img_box_small" @click="clickFile('km')">
						<image src="../../static/all/addimg.png" class="img_small"></image>
					</view>
					<view class="space_25"></view>
				</view>
				<view class="space_35"></view>
				<view class="input_label">用车前里程表显示里程（自动带出不可修改）</view>
				<view class="input_line1"> <!--注意：输入框的边框颜色自定义样式，必须用:styles (加s)-->
					<uni-easyinput v-model="form_task_progress.startKm" :styles="styles" :placeholderStyle="placeholderStyle" disabled></uni-easyinput>
				</view>
				<view class="space_35"></view>
			</view>
			<!--是否出现车况描述输入块-->
			<view class="input_box">
				<view class="space_15"></view>
				<view class="r_return_info">
					<image src="../../static/all/d_jibenxinxi.png" style="width:45rpx;height:45rpx;margin-top:5rpx;"></image>
					<span style="padding: 10rpx;"></span>是否需要用车前标注车况信息：
				</view>
				<view class="input_line1">
					<u-radio-group v-model="carInfo" placement="row" @change="showCarInfo()">
						<u-radio :customStyle="{marginLeft:'50px'}" v-for="(item, index) in radio_carInfo"
										 :key="index" :label="item.name" :name="item.value" size="26"></u-radio>
					</u-radio-group>
				</view>
				<view class="space_1"></view>
			</view>
			<!--车况描述输入块（如果选择标注车况信息则为必填项）-->
			<view class="input_box" v-if="carInfo">
				<view class="input_box_title">
					<view class="input_box_title_L">
						<image src="../../static/all/r_wenti.png" style="width:45rpx;height:45rpx;"></image>
						<span style="padding: 10rpx;"></span>用车时车况照片
					</view>
					<view class="input_box_title_R"></view>
				</view>
				<view class="r_return_img"> <!--上传图片部分-->
					<view v-if="img_chekuang_num>0&&item.type=='chekuang'" class="img_box_small" style="position:relative;"
					      v-for="(item,index) in form_task_progress.accessEventAppendixList" :key="index">
						<image :src="item.url" class="img_small"></image>
						<image src="../../static/all/imgdel.png" style="position:absolute;top:5rpx;right:5rpx;width:50rpx;height:50rpx;" @click="delImg(item.remark,item.type)"></image>
					</view>
					<view class="img_box_small" @click="clickFile('chekuang')">
						<image src="../../static/all/addimg.png" class="img_small"></image>
					</view>
					<view class="space_25"></view>
				</view>
				<view class="space_35"></view>
				<view class="input_label">用车时车况描述</view>
				<view class="input_textarea"> <!--注意：输入框的边框颜色自定义样式，必须用:styles (加s)-->
					<uni-easyinput type="textarea" v-model="form_task_progress.remark" :styles="styles" :placeholderStyle="placeholderStyle"
					               placeholder="请输入车况描述"></uni-easyinput>
				</view>
				<view class="space_35"></view>
			</view>

			<view class="space_55"></view>
			<!--提交按钮行-->
			<view v-if="btn==1" class="form_btn" @click="form_task_progress_submit()">确<span style="padding:30rpx;"></span>定</view>
			<view v-if="btn==0" class="form_btn btn_notClick">执行中……</view>
			<view class="space_80"></view>
		</view>
	</view>
</template>

<script>
	import baseURL from '@/config.js';
	import utils from "@/utils/business/services.js";
	export default {
		data() {
			return {
				//控件的样式
				placeholderStyle: "color:#A9A9A9;font-size:30rpx", 
				styles: {
					disableColor: '#FFF',
					borderColor: '#87CEFA', //文本框边框颜色
				},
				/***************************以下是使用车辆相关变量****************************/
				accessTaskId:"", //用于接收页面传参（申请单任务id）
				form_task_progress: {
					accessTaskId: '', //申请单任务id
					accessEventAppendixList: [], //附件（用于识别开始里程与车况照片）
					startKm: "", //记录开始里程数
					status: "able", //补充一个固定的属性
					remark: '', //车况描述
				},
				//是否显示车况信息选择
				carInfo: false, //是否显示车况信息框（默认为false）
				radio_carInfo: [{name: '是',value: true, },{name: '否',value:false, },],
				//文件上传相关
				action: "", //上传图片的接口地址
				img_km_num: 0, //里程表的照片数 （限定1张）
				img_chekuang_num: 0, //车况照片（可多张）
				/***************************以上是使用车辆相关变量****************************/
				//防重复提交
				btn: 1, //0：不可用  1：可用（默认可用）
				
				//在此之上补充变量
			}
		},
		watch: {},
		onLoad(option) {
			getApp().globalData.query_flag=0; //在子页面（提交成功后需要刷新父页面）中将刷新控制变量置为0
			
			if(JSON.stringify(option)!="{}"){
				this.accessTaskId=option.accessTaskId;
				this.form_task_progress.startKm=option.mileage; //2024-04补充：为了实现新补充的取车时的里程采用上次还车时的里程
			}
			
			//加载文件上传参数
			this.initImgParam();
		},
		onShow() {},
		methods: {
			/******************************以下是通用方法********************************/
			//顶部导航回退箭头点击触发
			leftClick(){
				utils.pageBack();
			},
			//隐藏系统键盘
			hideKeyboard() {
				uni.hideKeyboard();
			},
			gotoPage(flag){
				if(flag=="A"){
					// uni.navigateTo({
					// 	url:"/page_car/car/car_select",
					// })
				}
			},
			/******************************以上是通用方法*********************************/
			
			/******************************以下是业务方法*********************************/
			//切换显示车况信息块与否是的处理（主要是选否的时候，需要初始化图片与描述）
			showCarInfo(){
				if(!this.carInfo){ //是（显示）
					this.img_chekuang_num=0; //数量统计变量初始化
					this.form_task_progress.remark="" //描述初始化
					var tA=[];
					//图片初始化
					for(var i=0;i<this.form_task_progress.accessEventAppendixList.length;i++){
						if(this.form_task_progress.accessEventAppendixList[i].type!="chekuang"){
							tA.push(this.form_task_progress.accessEventAppendixList[i]);
						}
					}
					this.form_task_progress.accessEventAppendixList=tA;
					console.log("点击了否之后的附件集合==",this.form_task_progress.accessEventAppendixList);
				}
			},
			
			//以下是上传图片相关方法
			//初始化图片上传相关参数
			initImgParam(){
				this.action=baseURL + "/uploadImg/uploadFileNew";
				console.log("上传图片组件参数",this.action); 
			},
			async clickFile(flag){
				var that=this;
				var r=await utils.testIos();
				console.log("ios专属处理r==",r);
				//将事件插入了"任务队列"，必须等到执行栈执行完主线程才会去执行它指定的回调函数
				setTimeout(() => {
					//若成功返回e，则调起相册与相机
					if(r.data.status=="success"){ 
						uni.chooseImage({
							count: 1, //最多可以选择的图片张数，默认9
							//sourceType: ['album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
							sizeType: ['compressed'],//original 原图，compressed 压缩图，默认二者都有
							success(res) {
								console.log('选择图片完成', res)
								// 调用上传图片的接口
								that.uploadPhoto(res.tempFilePaths,flag); 
							},
							fail(err) {
								console.log('选取文件失败', err);
							},
							complete() {
								console.log('选取文件结束');
							},
						})
					}
				});
					
			},
			uploadPhoto(tempFilePaths,flag) { 
				uni.showLoading({
				  title: '上传中……'
				}); //显示“上传中”加载框
				var that=this;
				uni.uploadFile({
					url: this.action, //接口url
					headers: {
						'content-type': 'multipart/form-data',
					},
					filePath: tempFilePaths[0], // 要上传文件资源的路径
					name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
					formData:{
						// HTTP 请求中其他额外的 form data （即接口需要的其它参数）
					},
					success(res) {
						console.log('上传成功', res);
						uni.hideLoading(); //关闭加载框
						//that.form_task_progress.accessEventAppendixList=[]; //单一图片集合初始化（如果是多次上传单张图片，则不要这一条）
						var tArray=JSON.parse(res.data);
						console.log('上传成功解析返回值==',tArray);
						var turl=""; //测试识别接口（********************测试行）
						for(var i=0;i<tArray.length;i++){
							var obj={};
							obj.remark=tArray[i].filename; 
							obj.url=tArray[i].url; //取url
							if(flag=="km"){
								turl=tArray[i].url; //测试识别接口（********************测试行）
							}
							
							obj.type=flag; //km（里程表）  chekuang（车况照片）
							obj.status=""; //必须项，给个空串
							that.form_task_progress.accessEventAppendixList.push(obj);
						}
						
						//获取里程表照片数量，加油金额照片数量
						that.img_km_num=0; //先初始化图片数
						that.img_chekuang_num=0;
						for(var i=0;i<that.form_task_progress.accessEventAppendixList.length;i++){
							if(that.form_task_progress.accessEventAppendixList[i].type=="km"){
								that.img_km_num++;
							}
							if(that.form_task_progress.accessEventAppendixList[i].type=="chekuang"){
								that.img_chekuang_num++;
							}
						}
						console.log("上传图片后的不同种类图片的数量img_km_num，img_chekuang_num==",that.img_km_num,that.img_chekuang_num);
						
						// if(flag=="km"){
						// 	that.testOcr(turl); //测试识别接口（********************测试行）
						// }
						
						console.log("上传图片后的form_task_progress==",that.form_task_progress);
					},
					fail(err) {
						console.log('上传文件失败', err);
					},
					complete() {
						console.log('上传文件结束');
					},
				})
			},
			//删除文件（比对文件名方式方式）
			delImg(filename,type) {
				var that=this;
				console.log("删除图片参数filename，type==",filename,type);
				uni.showModal({
					title: '提示',
					content: '确定要删除这个图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if(res.confirm) {
							var tA=that.form_task_progress.accessEventAppendixList;
							for(var i=0;i<tA.length;i++){
								if(tA[i].remark==filename){
									tA.splice(i, 1);
									break;
								}
							}
							console.log("执行删除图片后的form_task_progress.accessEventAppendixList==",that.form_task_progress.accessEventAppendixList);
							//获取里程表照片数量，车况照片数量
							that.img_km_num=0; //先初始化图片数
							that.img_chekuang_num=0;
							for(var i=0;i<that.form_task_progress.accessEventAppendixList.length;i++){
								if(that.form_task_progress.accessEventAppendixList[i].type=="km"){
									that.img_km_num++;
								}
								if(that.form_task_progress.accessEventAppendixList[i].type=="chekuang"){
									that.img_chekuang_num++;
								}
							}
							console.log("删除图片后的不同种类图片的数量img_km_num，img_chekuang_num==",that.img_km_num,that.img_chekuang_num);
						}
					}
				})
			},
			//以上是上传图片相关方法
			
			//主提交方法
			form_task_progress_submit(){
				var that=this;
				that.form_task_progress.accessTaskId=that.accessTaskId;
				if(that.img_km_num==0){ 
					uni.showModal({
						title: '提示',
						content: '请上传里程表清晰照片！',
						showCancel:false,
						success: function (res) {
							if(res.confirm){} 
						}
					}); //uni.showModal结束
					return;
				}
				// 2024-05修改：里程数输入框改为只读不可编辑
				// if(that.form_task_progress.startKm==""){
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '请填写里程数！',
				// 		showCancel:false,
				// 		success: function (res) {
				// 			if(res.confirm){} 
				// 		}
				// 	}); //uni.showModal结束
				// 	return;
				// }
				if(that.carInfo){ //如果选择了录入用车前车况信息，则车况信息块中的2项是必填项
					if(that.img_chekuang_num==0){ //车况照片
						uni.showModal({
							title: '提示',
							content: '请上传车况照片！',
							showCancel:false,
							success: function (res) {
								if(res.confirm){} 
							}
						}); //uni.showModal结束
						return;
					}
					if(that.form_task_progress.remark==""){ //车况描述
						uni.showModal({
							title: '提示',
							content: '请填写车况描述！',
							showCancel:false,
							success: function (res) {
								if(res.confirm){} 
							}
						}); //uni.showModal结束
						return;
					}
				}
				console.log("使用车辆提交的参数==",that.form_task_progress);
				uni.showModal({
						title: '提示',
						content: '确定使用车辆吗？',
						success: function(res) {
							if (res.confirm) {
								that.btn=0; //按钮置为不可用
								utils.startCarEvent(that.form_task_progress).then(res => {
									console.log('申请人使用车辆接口的返回值==',res); 
									that.btn=1; //无论成功与否按钮均置为可用
									if(res.data.status=="success"){
										getApp().globalData.query_flag=1; //查询全局控制变量(避免列表页面重复查询2次)
										uni.showToast({
											title:'操作成功！',
											icon: 'success'
										});
										setTimeout(() => {
											//关闭当前页，刷新列表页面
											utils.pageBack();
										}, 1000); //显示toast 500毫秒之后执行
									}
									if(res.data.status=="error"){
										let msg=res.data.message;
										uni.navigateTo({
											url:'/pages/error/error?errorMsg='+msg 
										}) 
									}
								}).catch(error => {
									uni.navigateTo({
										url:'/pages/error/error?errorMsg='+error
									})
								})
							} 
							else {
								//执行取消后的操作
							}
						}
					})//uni.showModal结束
			},
			/******************************以上是业务方法**********************************/
			
			//测试识别接口（********************测试行）
			testOcr(url){
				var that=this;
				var key="LjSGLfDvbzTvfACd4uhgxHubla";
				utils.testOcr(key,url).then(res => {
					console.log('OCR识别接口的返回值==',res); 
					if(res.data.code=="200"){
						var km=res.data.data.text; //取识别出的文字
						console.log("识别出的文本是==",km);
						that.form_task_progress.startKm=parseFloat(km); //提取km中的浮点数
						
						var km_num=km.replace(/[^\d]/g, " ");
						console.log("使用第二种提取方式获取的公里数==",km_num);
					}
					// if(res.data.status=="error"){
					// 	let msg=res.data.message;
					// 	uni.navigateTo({
					// 		url:'/pages/error/error?errorMsg='+msg 
					// 	}) 
					// }
				}).catch(error => {
					console.log("OCR接口错误==",error);
					// uni.navigateTo({
					// 	url:'/pages/error/error?errorMsg='+error
					// })
				})
			},
			/*********************在此之上补充方法**********************/
		},
	}
</script>
<style lang="scss">
@import '../../common/css/page.css'; 
@import '../../common/css/b_form.css';
@import '../../common/css/review.css';
</style>